<template>
    <!-- 页面布局的根元素 -->
    <div>
        <!-- 显示登录标题 -->
        <h1>login</h1>
        <!-- 登录表单，使用 @submit.prevent 阻止表单的默认提交行为，并调用 login 方法 -->
        <form @submit.prevent="login">
            <!-- 输入框，使用 v-model 双向绑定 username 变量，显示 Username 占位符 -->
            <input v-model="username" placeholder="Username" />
            <!-- 输入框，使用 v-model 双向绑定 password 变量，显示 Password 占位符，输入类型为密码 -->
            <input v-model="password" type="password" placeholder="Password" />
            <!-- 提交按钮 -->
            <button type="submit">Login</button>
        </form>
        <!-- 根据 loginMessage 的值显示登录消息，如果 loginMessage 有值则显示 -->
        <div v-if="loginMessage">{{ loginMessage }}</div>
        <!-- 显示注册标题 -->
        <h1>register</h1>
        <!-- 注册表单，使用 @submit.prevent 阻止表单的默认提交行为，并调用 register 方法 -->
        <form @submit.prevent="register">
            <!-- 输入框，使用 v-model 双向绑定 registerUsername 变量，显示 Username 占位符 -->
            <input v-model="registerUsername" placeholder="Username" />
            <!-- 输入框，使用 v-model 双向绑定 registerPassword 变量，显示 Password 占位符，输入类型为密码 -->
            <input v-model="registerPassword" type="password" placeholder="Password" />
            <!-- 提交按钮 -->
            <button type="submit">Register</button>
        </form>
        <!-- 根据 registerMessage 的值显示注册消息，如果 registerMessage 有值则显示 -->
        <div v-if="registerMessage">{{ registerMessage }}</div>
    </div>
</template>

<script setup>
// 导入 Vue 的 ref 函数
import { ref } from 'vue';
// 导入 axios 库，用于发送 HTTP 请求
import axios from 'axios';

// 使用 ref 创建响应式变量 username，初始值为空字符串
const username = ref('');
// 使用 ref 创建响应式变量 password，初始值为空字符串
const password = ref('');
// 使用 ref 创建响应式变量 registerUsername，初始值为空字符串
const registerUsername = ref('');
// 使用 ref 创建响应式变量 registerPassword，初始值为空字符串
const registerPassword = ref('');
// 使用 ref 创建响应式变量 loginMessage，初始值为空字符串
const loginMessage = ref('');
// 使用 ref 创建响应式变量 registerMessage，初始值为空字符串
const registerMessage = ref('');

// 定义异步的登录函数
const login = async () => {
    try {
        // 发送 POST 请求到 http://127.0.0.1:5000/login ，并传递用户名和密码
        const response = await axios.post('http://127.0.0.1:5000/login', { username: username.value, password: password.value });
        // 将响应中的 message 存储在 loginMessage 中
        loginMessage.value = response.data.message;
    } catch (error) {
        // 如果请求出错，检查是否有响应
        if (error.response) {
            // 将响应中的错误信息存储在 loginMessage 中
            loginMessage.value = error.response.data.error;
        } else {
            // 若没有响应，显示通用的错误消息
            loginMessage.value = '请求出错，请稍后再试';
        }
    }
};

// 定义异步的注册函数
const register = async () => {
    try {
        // 发送 POST 请求到 http://127.0.0.1:5000/register ，并传递注册的用户名和密码
        const response = await axios.post('http://127.0.0.1:5000/register', { username: registerUsername.value, password: registerPassword.value });
        // 将响应中的 message 存储在 registerMessage 中
        registerMessage.value = response.data.message;
    } catch (error) {
        // 如果请求出错，检查是否有响应
        if (error.response) {
            // 将响应中的错误信息存储在 registerMessage 中
            registerMessage.value = error.response.data.error;
        } else {
            // 若没有响应，显示通用的错误消息
            registerMessage.value = '请求出错，请稍后再试';
        }
    }
};
</script>

<style scoped>
form {
    /* 为表单元素添加底部外边距 20px */
    margin-bottom: 20px;
}
</style>